<template>
	<view>
		<!-- 列表平铺两列三列 -->
		<view class="coreshop-padding-10 coreshop-margin-10 coreshop-bg-white coreshop-border-radius-trbl-18"
			v-if="coreshopData.parameters.column == '2' && coreshopData.parameters.display == 'list' || coreshopData.parameters.column == '3' && coreshopData.parameters.display == 'list'">
			<view
				class="coreshop-flex coreshop-align-center coreshop-flex-direction-row coreshop-justify-between coreshop-min-height-30"
				v-if="coreshopData.parameters.lookTitle == true">
				<view class="coreshop-font-16 coreshop-text-black coreshop-font-weight-bold">
					{{coreshopData.parameters.title}}
				</view>
				<u-icon name="arrow-right-double" size="12" label="查看更多" labelSize="12" labelPos="left"
					v-if="coreshopData.parameters.lookMore == true"
					@click="goGoodsList({catId: coreshopData.parameters.classifyId,brandId:coreshopData.parameters.brandId})">
				</u-icon>
			</view>
			<view class="coreshop-divider">
				<view class="complete"></view>
			</view>
			<view class="coreshop-text-black">
				<custom-waterfalls-flow :value="coreshopData.parameters.list" :column="coreshopData.parameters.column"
					@wapperClick="wapperClick" @imageClick="imageClick">
					<!-- #ifdef MP-WEIXIN -->
					<view class="goods coreshop-padding-bottom-10 coreshop-bg-main"
						v-for="(item,index) in coreshopData.parameters.list" :key="index" slot="slot{{index}}">
						<view
							class="coreshop-padding-top-6 coreshop-padding-bottom-3 coreshop-padding-left-8 coreshop-padding-right-8 coreshop-bg-main coreshop-border-radius-bl-18">
							<view class="coreshop-multiple-line-clamp">
								<text class="coreshop-font-14">{{item.name}}</text>
							</view>
							<view
								class="coreshop-margin-top-8 coreshop-flex coreshop-justify-between coreshop-align-center coreshop-margin-bottom-5">
								<view class="coreshop-text-red coreshop-font-weight-bold">
									<text class="coreshop-font-12">¥</text>
									<text class="coreshop-font-16">{{item.price}}</text>
									<span
										class="coreshop-font-xs  coreshop-text-through coreshop-margin-left-6 coreshop-text-gray"
										v-if="coreshopData.parameters.column==2">{{item.mktprice}}元</span>
								</view>
								<view>
									<text
										class="coreshop-font-10 coreshop-text-gray">已售{{item.buyCount+item.initialSales}}{{item.unit}}</text>
								</view>
							</view>
							<view class="coreshop-divider"
								v-if="pointSwitch==1 && pointExchangeModel==2 && pointShowExchangePrice==1 && item.pointsDeduction > 0">
								<view class="complete"></view>
							</view>
							<view class="coreshop-flex coreshop-font-11 coreshop-margin-top-10 coreshop-margin-bottom-5"
								:class="coreshopData.parameters.column>2?'coreshop-flex-direction-column':'coreshop-flex-direction-row'"
								v-if="pointSwitch==1 && pointExchangeModel==2 && pointShowExchangePrice==1 && item.pointsDeduction > 0">
								<view>
									{{ pointShowName}}兑换价:
								</view>
								<view class="coreshop-text-red">
									{{pointDiscountedProportion * item.pointsDeduction }}{{ pointShowName}}+{{ parseFloat(item.price-item.pointsDeduction).toFixed(2)}}元
								</view>
							</view>
							<view
								class="coreshop-flex coreshop-flex-direction-row coreshop-font-11 coreshop-margin-top-5 coreshop-margin-bottom-5"
								v-if="pointSwitch==1 && pointGetModel==2 && pointShowPoint==1 && item.points > 0">
								<view>
									购买赠送:
								</view>
								<view class="coreshop-text-red">
									{{item.points}}{{ pointShowName}}
								</view>
							</view>
						</view>
					</view>
					<!-- #endif -->
					<!-- #ifndef MP-WEIXIN -->
					<template v-slot:default="item">
						<view class="goods">
							<view
								class="coreshop-padding-top-6 coreshop-padding-bottom-3 coreshop-padding-left-8 coreshop-padding-right-8 coreshop-bg-white coreshop-border-radius-bl-18">
								<view class="coreshop-multiple-line-clamp">
									<text class="coreshop-font-14">{{item.name}}</text>
								</view>
								<view
									class="coreshop-margin-top-8 coreshop-flex coreshop-justify-between coreshop-align-center coreshop-margin-bottom-5">
									<view class="coreshop-text-red coreshop-font-weight-bold">
										<text class="coreshop-font-12">¥</text>
										<text class="coreshop-font-16">{{item.price}}</text>
										<span
											class="coreshop-font-xs  coreshop-text-through coreshop-margin-left-6 coreshop-text-gray"
											v-if="coreshopData.parameters.column==2">{{item.mktprice}}元</span>
									</view>
									<view>
										<text
											class="coreshop-font-10 coreshop-text-gray">已售{{item.buyCount+item.initialSales}}{{item.unit}}</text>
									</view>
								</view>
								<view class="coreshop-divider"
									v-if="pointSwitch==1 && pointExchangeModel==2 && pointShowExchangePrice==1 && item.pointsDeduction > 0">
									<view class="complete"></view>
								</view>
								<view
									class="coreshop-flex coreshop-font-11 coreshop-margin-top-10 coreshop-margin-bottom-5"
									:class="coreshopData.parameters.column>2?'coreshop-flex-direction-column':'coreshop-flex-direction-row'"
									v-if="pointSwitch==1 && pointExchangeModel==2 && pointShowExchangePrice==1 && item.pointsDeduction > 0">
									<view>
										{{ pointShowName}}兑换价:
									</view>
									<view class="coreshop-text-red">
										{{pointDiscountedProportion * item.pointsDeduction }}{{ pointShowName}}+{{ parseFloat(item.price-item.pointsDeduction).toFixed(2)}}元
									</view>
								</view>
								<view
									class="coreshop-flex coreshop-flex-direction-row coreshop-font-11 coreshop-margin-top-5  coreshop-margin-bottom-5"
									v-if="pointSwitch==1 && pointGetModel==2 && pointShowPoint==1 && item.points > 0">
									<view>
										购买赠送:
									</view>
									<view class="coreshop-text-red">
										{{item.points}}{{ pointShowName}}
									</view>
								</view>
							</view>
						</view>
					</template>
					<!-- #endif -->
				</custom-waterfalls-flow>
			</view>
		</view>

		<!-- 列表平铺单列 -->
		<view class="coreshop-padding-10 coreshop-margin-10 coreshop-bg-white coreshop-border-radius-trbl-18"
			v-if="coreshopData.parameters.column == '1' && coreshopData.parameters.display == 'list'">
			<view
				class="coreshop-flex coreshop-align-center coreshop-flex-direction-row coreshop-justify-between coreshop-min-height-30"
				v-if="coreshopData.parameters.lookTitle == 'true'">
				<view class="coreshop-font-16 coreshop-text-black coreshop-font-weight-bold">
					{{coreshopData.parameters.title}}
				</view>
				<u-icon name="arrow-right-double" size="12" label="查看更多" labelSize="12" labelPos="left"
					v-if="coreshopData.parameters.lookMore == 'true'"
					@click="goGoodsList({catId: coreshopData.parameters.classifyId,brandId:coreshopData.parameters.brandId})">
				</u-icon>
			</view>
			<view class="coreshop-divider">
				<view class="complete"></view>
			</view>
			<view class="coreshop-text-black" v-for="(item, index) in coreshopData.parameters.list" :key="index"
				v-if="count" @tap="goGoodsDetail(item.id)">
				<view class="coreshop-flex coreshop-justify-start coreshop-padding-top-10 coreshop-padding-bottom-10">
					<view>
						<u--image :src="item.image" mode="widthFix" width="130px" height="130px" radius="8"></u--image>
					</view>
					<view class="coreshop-flex coreshop-flex-direction  coreshop-padding-left-10  coreshop-percent-100">
						<view class="coreshop-font-14 u-line-2 coreshop-text-black">{{ item.name }}</view>
						<view
							class="coreshop-font-11 coreshop-padding-top-5 coreshop-padding-bottom-3 u-line-2 coreshop-text-brown">
							{{ item.brief }}
						</view>
						<view
							class="coreshop-flex coreshop-align-center coreshop-padding-top-10  coreshop-padding-bottom-10">
							<view
								class="coreshop-font-11 coreshop-bg-orange coreshop-padding-2 coreshop-border-radius-4 coreshop-margin-right-10">
								已售{{item.buyCount+item.initialSales}}{{item.unit}}</view>
							<view
								class="coreshop-font-11 coreshop-bg-olive coreshop-padding-2 coreshop-border-radius-4">
								{{item.viewCount}}人访问
							</view>
						</view>
						<view
							class="coreshop-flex coreshop-justify-between  coreshop-flex-direction-row coreshop-align-center">
							<view class="coreshop-flex coreshop-align-center">
								<view class="coreshop-font-14 coreshop-text-red">￥{{ item.price  }}</view>
								<view class="coreshop-font-12 coreshop-text-gray coreshop-text-through">
									￥{{ item.mktprice }}</view>
							</view>
							<view class="coreshop-buy-btn">马上抢</view>
						</view>
					</view>
					<view class="coreshop-flex coreshop-flex-direction-row coreshop-font-11 coreshop-margin-top-5"
						v-if="pointSwitch==1 && pointExchangeModel==2 && pointShowExchangePrice==1 && item.pointsDeduction > 0">
						<view>
							{{ pointShowName}}兑换价:
						</view>
						<view class="coreshop-text-red">
							{{pointDiscountedProportion * item.pointsDeduction }}{{ pointShowName}}+{{ parseFloat(item.price-item.pointsDeduction).toFixed(2)}}
							元
						</view>
					</view>
					<view class="coreshop-flex coreshop-flex-direction-row coreshop-font-11 coreshop-margin-top-5"
						v-if="pointSwitch==1 && pointGetModel==2 && pointShowPoint==1 && item.points > 0">
						<view>
							购买赠送:
						</view>
						<view class="coreshop-text-red">
							{{item.points}}{{ pointShowName}}
						</view>
					</view>
				</view>
			</view>
			<view class="order-none" v-else>
				<u-empty :icon="$globalConstVars.apiFilesUrl+'/static/images/empty/order.png'" icon-size="150" text="暂无"
					mode="list"></u-empty>
			</view>
		</view>

		<!-- 横向滚动 -->
		<view class="coreshop-padding-10 coreshop-margin-10 coreshop-bg-white coreshop-border-radius-trbl-18"
			v-if="coreshopData.parameters.display == 'slide'">
			<view
				class="coreshop-flex coreshop-align-center coreshop-flex-direction-row coreshop-justify-between coreshop-min-height-30"
				v-if="coreshopData.parameters.lookTitle == 'true'">
				<view class="coreshop-font-16 coreshop-text-black coreshop-font-weight-bold">
					{{coreshopData.parameters.title}}
				</view>
				<u-icon name="arrow-right-double" size="12" label="查看更多" labelSize="12" labelPos="left"
					v-if="coreshopData.parameters.lookMore == 'true'"
					@click="goGoodsList({catId: coreshopData.parameters.classifyId,brandId:coreshopData.parameters.brandId})">
				</u-icon>
			</view>
			<view class="coreshop-divider">
				<view class="complete"></view>
			</view>
			<view v-if="count">
				<swiper
					:class="coreshopData.parameters.column==3?'swiper3':coreshopData.parameters.column==2?'swiper2':''"
					@change="change">
					<swiper-item v-for="(no, indexPage) of pageCount" :key="indexPage">
						<u-grid :col="coreshopData.parameters.column" :border="false" align="left" :data-id="no">
							<u-grid-item v-for="(item, index)  in coreshopData.parameters.list"
								v-if="index >=coreshopData.parameters.column*no && index <coreshopData.parameters.column*(no+1)"
								:key="index" @click="goGoodsDetail(item.id)">
								<view class="good_box">
									<u-image :src="item.image" :index="item.id" mode="widthFit" width="100%"
										:height="coreshopData.parameters.column==3?'104px':coreshopData.parameters.column==2?'164px':'104px'"
										radius="10">
									</u-image>
									<view class="good_title u-line-2">
										{{item.name}}
									</view>
									<view class="good-price coreshop-display-block">
										{{item.price}}元 <span
											class="coreshop-font-xs  coreshop-text-through coreshop-margin-left-5 coreshop-text-gray">{{item.mktprice}}元</span>
									</view>
									<view class="good-tag-recommend" v-if="item.isRecommend">
										推荐
									</view>
									<view class="good-tag-hot" v-if="item.isHot">
										热门
									</view>
									<view
										class="coreshop-flex coreshop-flex-direction-row coreshop-font-11 coreshop-margin-top-5"
										v-if="pointSwitch==1 && pointExchangeModel==2 && pointShowExchangePrice==1 && item.pointsDeduction > 0">
										<view>
											{{ pointShowName}}兑换价:
										</view>
										<view class="coreshop-text-red">
											{{pointDiscountedProportion * item.pointsDeduction }}{{ pointShowName}}+{{ parseFloat(item.price-item.pointsDeduction).toFixed(2)}}
											元
										</view>
									</view>
									<view
										class="coreshop-flex coreshop-flex-direction-row coreshop-font-11 coreshop-margin-top-5"
										v-if="pointSwitch==1 && pointGetModel==2 && pointShowPoint==1 && item.points > 0">
										<view>
											购买赠送:
										</view>
										<view class="coreshop-text-red">
											{{item.points}}{{ pointShowName}}
										</view>
									</view>
								</view>
							</u-grid-item>
						</u-grid>
					</swiper-item>
				</swiper>
				<view class="indicator-dots">
					<view class="indicator-dots-item" v-for="(no, index)  of pageCount" :key="index"
						:class="[current == no ? 'indicator-dots-active' : '']">
					</view>
				</view>
			</view>
			<view v-else="">
				<scroll-view class='swiper-list' scroll-x="true"></scroll-view>
			</view>

		</view>



	</view>
</template>

<script>
	export default {
		data() {
			return {
				current: 0,
				pageCount: [],
				count: false
			};
		},
		name: "coreshopGoods",
		props: {
			coreshopData: {
				// type: Array,
				required: true,
			}
		},
		computed: {
			pointSwitch() {
				return this.$store.state.config.pointSwitch
			},
			pointShowExchangePrice() {
				return this.$store.state.config.pointShowExchangePrice
			},
			pointDiscountedProportion() {
				return this.$store.state.config.pointDiscountedProportion
			},
			pointExchangeModel() {
				return this.$store.state.config.pointExchangeModel
			},
			pointShowName() {
				return this.$store.state.config.pointShowName
			},
			pointGetModel() {
				return this.$store.state.config.pointGetModel
			},
			pointShowPoint() {
				return this.$store.state.config.pointShowPoint
			},
		},
		methods: {
			change(e) {
				this.current = e.detail.current;
			},
			wapperClick(item) {
				this.goGoodsDetail(item.id)
			},
			imageClick(item) {
				this.goGoodsDetail(item.id)
			},
		},
		created() {
			this.count = this.coreshopData.parameters.list.length > 0;
			var page = Number(this.coreshopData.parameters.list.length / this.coreshopData.parameters.column).toFixed(0);
			if (this.coreshopData.parameters.column * page < this.coreshopData.parameters.list.length) {
				page = Number(page) + 1;
			}
			for (var i = 0; i < page; i++) {
				this.pageCount.push(i);
			}
		}
	}
</script>

<style scoped lang="scss">
	.good_box {
		border-radius: 8px;
		background-color: #ffffff;
		padding: 5px;
		position: relative;
		width: 100%;

		.good_title {
			font-size: 14px;
			margin-top: 5px;
			color: $u-main-color;
		}

		.good-tag-hot {
			display: flex;
			margin-top: 5px;
			position: absolute;
			top: 7.5px;
			left: 7.5px;
			background-color: $u-type-error;
			color: #FFFFFF;
			display: flex;
			align-items: center;
			padding: 2px 7px;
			border-radius: 25px;
			font-size: 10px;
			line-height: 1;
		}

		.good-tag-recommend {
			display: flex;
			margin-top: 5px;
			position: absolute;
			top: 7.5px;
			right: 7.5px;
			background-color: $u-type-primary;
			color: #FFFFFF;
			margin-left: 10px;
			border-radius: 25px;
			line-height: 1;
			padding: 2px 7px;
			display: flex;
			align-items: center;
			border-radius: 25px;
			font-size: 10px;
		}

		.good-tag-recommend2 {
			display: flex;
			margin-top: 5px;
			position: absolute;
			bottom: 7.5px;
			left: 7.5px;
			background-color: $u-type-primary;
			color: #FFFFFF;
			border-radius: 25px;
			line-height: 1;
			padding: 2px 7px;
			display: flex;
			align-items: center;
			border-radius: 25px;
			font-size: 10px;
		}

		.good-price {
			font-size: 15px;
			color: $u-type-error;
			margin-top: 5px;
		}
	}

	.indicator-dots {
		margin-top: 10px;
		margin-bottom: 10px;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: row;

		.indicator-dots-item {
			background-color: $u-tips-color;
			height: 6px;
			width: 6px;
			border-radius: 10px;
			margin: 0 3px;
		}

		.indicator-dots-active {
			background-color: $u-type-primary;
		}
	}

	.swiper3 {
		height: 200px;
	}

	.swiper2 {
		height: 270px;
	}

	.image2 {
		height: 150px;
	}

	.image3 {
		height: 150px;
	}
</style>
